<template>
    <div>
      <headers></headers><br><br><br>
      <div class="card" style="margin-bottom: 10px;">
        <el-input style="width: 300px; margin-right: 10px" placeholder="请输入关键字查询" v-model="datatable.keyWord" prefix-icon="Search"></el-input>
        <el-button type="primary">查询</el-button>
        <el-button type="info" style="margin: 0 10px" @click="rest">重置</el-button>
      </div>
  
      <div class="card" style="margin-bottom: 10px">
        <div style="margin-bottom: 10px">
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
        <el-table :data="datatable.tableData">
          <el-table-column label="用户名" prop="username" ></el-table-column>
          <el-table-column label="邮箱" prop="userEmail" ></el-table-column>
          <el-table-column label="性别" prop="userSex"></el-table-column>
          <el-table-column label="头像" prop="userAvatar">
            <template #default="scope">
              <el-image v-if="scope.row.userAvatar" :src="scope.row.userAvatar" :preview-src-list="[scope.row.userAvatar]" style="width:40px;height: 40px;border-radius: 5px;"></el-image>
            </template>
          </el-table-column>

          <el-table-column label="角色" prop="userRole"></el-table-column>

          <el-table-column >
            <template #default="scope">
              <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <div class="card">
        <el-pagination background layout="prev, pager, next"
        @current-change="getPages"
            v-model:current-page="datatable.pageNum" v-model:page-size="datatable.pageSize" :total="datatable.total"/>
      </div>
  
  
      <div>
        <el-dialog width="35%" v-model="datatable.formVisible" title="信息" destroy-on-close>
          <el-form :model="datatable.form" label-width="100px" label-position="right">
            <el-form-item label="用户名" v-show="datatable.form.id==null">
              <el-input v-model="datatable.form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" v-show="datatable.form.id==null">
              <el-input v-model="datatable.form.userPwd" autocomplete="off" />
            </el-form-item>
            
            <el-form-item label="邮箱">
              <el-input v-model="datatable.form.userEmail" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" >
              <el-radio-group v-model="datatable.form.userSex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="角色" >
              <el-radio-group v-model="datatable.form.userRole">
                <el-radio label="USER"></el-radio>
                <el-radio label="ADMIN"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="用户头像">
              <!-- :action="$baseUrl+'/files/upload'" -->
              <el-upload action="http://121.41.171.56:8080/api/files/upload" :on-success="handleImguploadSuccess" list-type="picture">
                <el-button type="primary">上传头像</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="datatable.formVisible = false">取消</el-button>
              <el-button type="primary" @click="save">保存</el-button>
            </span>
        </template>
        </el-dialog>
      </div>
      
    
  
    </div>
  </template>
  
  <script setup >
  import Headers from '../components/Headers.vue';
  import request from "../utils/request";
  import {reactive,onMounted,watch,ref} from "vue";
  import {ElMessageBox} from "element-plus";
  import { Search } from "@element-plus/icons-vue";
  import { ElMessage } from 'element-plus'
  
  
  
  
  const datatable = reactive({
    formVisible:false,
    keyWord:"",
    pageNum: 1,
    pageSize:5,
    total:0,
    tableData: [
      
    ],
    form:{}
  })
  
  let getPages=async()=>{
    let {data}=await request.get(`/user/selectPageUser?pageNum=${datatable.pageNum}&pageSize=${datatable.pageSize}&keyWord=${datatable.keyWord}`)
    datatable.tableData=data.list
    datatable.total=data.total
    datatable.pageNum=data.pageNum
    datatable.pageSize=data.pageSize
  }
  
  const handleAdd=()=>{
    datatable.form={}
    datatable.formVisible=true
  }
  
  
  
  
  const save=()=>{
    datatable.formVisible=false
    request.post("user/addoupUser",datatable.form).then(res=>{
      if(res.code==200){
        getPages()
        ElMessage.success("操作成功")
      }else{
        ElMessage.error(res.message)
      }
    })
    
  }
  
  
  const handleEdit=(row)=>{
    datatable.form=JSON.parse(JSON.stringify(row))//把当前行的值赋值给data.form
    datatable.formVisible=true
  }
  
  const handleDelete=(id)=>{
    ElMessageBox.confirm(
      '删除数据不可逆，确定要删除吗?','删除确认',
      {
        type: 'warning',
      }
    ).then(() => {
      request.delete(`/user/deleteUser?id=${id}`).then(res=>{
        if(res.code==200){
          getPages()
          ElMessage.success("操作成功")
        }else{
          ElMessage.error(res.message)
        }
      })
      }).catch(() => {})
  }
  
  
  watch(()=>datatable.keyWord,()=>{
    getPages()
  })
  
  const rest=()=>{
    datatable.keyWord=""
    getPages()
  }
  
  
  
  onMounted(()=>{
    getPages()
  })
  
  const handleImguploadSuccess=(res)=>{
    datatable.form.avatar=res.data
  }
  
  
  </script>